<template>
  <div>
    <div id="tp"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      option: {
        title: [
          {
            text: '本月工作任务进度',
            subtext: '任务进度条展示',
            left: 'center'
          },
          {
            text: '已完成',
            x: 'center',
            top: '38%',
            textStyle: {
              fontSize: '16',
              color: '#999999',
              fontFamily: 'Lato'
            },
          },
          {
            text: '75%',
            x: 'center',
            top: '52%',
            textStyle: {
              color: '#1F3F6D',
              fontSize: 20,
              fontWeight: 'bold',
            }
          },
          {
            text: '25%任务未完成',
            left: 'center',
            top: '90%',
            textStyle: {
              fontSize: '16',
              color: '#1F3F6D',
              fontFamily: 'Lato'
            }
          },
        ],
        polar: {
          radius: ['55%', '65%'],  // 圆环大小
          center: ['50%', '50%'],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,

          },
          axisTick: {
            show: false
          },
        },
        series: [
          {
            name: '',
            type: 'bar',
            roundCap: true,
            barWidth: 60,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(66, 66, 66, .3)',
            },
            data: [75],
            coordinateSystem: 'polar',

            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: 'rgba(1, 214, 255)'
                }, {
                  offset: 1,
                  color: 'rgba(0, 254, 255)'
                }]),
              }
            }
          },
        ]
      }
    }
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      var myChart = this.$echarts.init(document.getElementById('tp'))
      window.onresize = myChart.resize
      myChart.setOption(this.option)
    }
  }
}
</script>
<style scoped>
#tp {
  width: 100%;
  height: 315px;
}
</style>